<template>

    <div class="filter-container" style="padding-top: 0">

        <el-form
                :inline="true"
                :model="formData"
                label-position="right"
                size="small"
                class="filter-form-inline"
        >
            <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px">
                <el-col :span="6">
                    <el-form-item label="状态" style="width: 100%">
                        <el-select
                                v-model="formData.clueStatus"
                                clearable
                                style="width: 100%"
                                placeholder="请选择状态"
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in statusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="跟进职员" style="width: 100%">
                        <el-select
                                v-model="formData.headId"
                                clearable
                                style="width: 100%"
                                placeholder="请选择职员"
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in headOptions"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col
                        :span="6"
                >
                    <el-form-item
                            label="关联营销任务"
                            style="width: 100%;"
                    >
                        <el-input
                                v-model="formData.taskNo"
                                clearable
                                placeholder="输入任务编号"
                        />
                    </el-form-item>
                </el-col>

                <el-col
                        :span="2"
                >
                    <el-form-item style="width: 100%">
                        <more-search-btn v-model:is-more="visible"/>
                    </el-form-item>
                </el-col>


                <el-col :span="4">
                    <el-form-item style="width: 100%">
                        <el-button
                                class="border-btn"
                                @click="reset"
                        >重置</el-button>
                        <el-button
                                type="primary"
                                class="main-btn"
                                @click="listSearch"
                        >搜索</el-button>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row v-if="visible" :gutter="20" style="margin-left: 0px; margin-right: 0px">

                <el-col
                        :span="6"
                >
                    <el-form-item
                            label="关键字"
                            style="width: 100%;"
                    >
                        <el-input
                                v-model="formData.keyWord"
                                clearable
                                placeholder="输入联系人、联系电话、公司等关键字查询"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

    </div>

    <table-view :data="tableData" :visible="visible" @row-click="rowClick">
        <el-table-column
                show-overflow-tooltip
                align="left"
                header-align="center"
                prop="clueNo"
                label="线索编号"
                :min-width="150"
        />
        <el-table-column
                show-overflow-tooltip
                align="left"
                header-align="center"
                prop="contactName"
                label="联系人"
                :min-width="100"
        />
        <el-table-column
                show-overflow-tooltip
                align="left"
                header-align="center"
                prop="contactPhone"
                label="联系电话"
                :min-width="150"
        />
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                prop="company"
                label="公司"
                :min-width="150"
        />
        <el-table-column show-overflow-tooltip align="center" header-align="center" label="线索来源" :min-width="100">
            <template #default="{row}">
                {{getLabel('clue_source',row.clueSource)}}
            </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" header-align="center" prop="taskNo" label="关联营销任务" :min-width="150"/>
        <el-table-column
                align="center"
                header-align="center"
                label="线索状态"
                :min-width="150"
        >
            <template #default="{row}">
                {{getLabel('clue_status',row.clueStatus)}}
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="负责跟进职员"
                prop="headName"
                :min-width="150"
        />
        <el-table-column
                align="center"
                header-align="center"
                label="最后跟进时间"
                :min-width="150"
        >
            <template #default="scope">
                <span v-if="scope.row.lastTime">{{dateFormat('yyyy-mm-dd HH:MM',scope.row.lastTime)}}</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                header-align="center"
                label="操作"
                fixed="right"
                :min-width="150"
        >
            <template #default="{row}">
                <template v-if="row.headId == userInfo.ID">
                    <el-button
                            v-if="row.clueStatus == 0 || row.clueStatus == 1"
                            type="text"
                            @click="onFollow(row)"
                    >写跟进</el-button>

                    <el-dropdown @command="(com) => { handleCommand(com,row) }" v-if="row.clueStatus == 0 || row.clueStatus == 1">
                        <span style="color:#EB6633">转换</span>
<!--                        <el-button v-if="row.clueStatus == 0 || row.clueStatus == 1" type="text">转换</el-button>-->

                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="1">代理商</el-dropdown-item>
                                <el-dropdown-item command="2">商销客户</el-dropdown-item>
                                <el-dropdown-item command="3">终端</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <el-button
                            v-if="row.clueStatus == 2"
                            class="delete-text-btn"
                            type="text"
                            @click="onDelete(row)"
                    >删除</el-button>
                </template>

            </template>
        </el-table-column>
    </table-view>

    <Pagination
            v-model:page="formData.page"
            v-model:limit="formData.pageSize"
            style="display: flex; justify-content: flex-end"
            :total="total"
            @pagination="getList"
    />

    <addClue ref="addClue" @success="getList"/>

    <addFollowDialog ref="addFollow" :datas="selectData" @success="getList"/>

    <fromDialog ref="fromDialog" :clue-id="selectData.id" @succsess="getList"/>

    <newForm ref="newFormRef" :clue-id="selectData.id" @succsess="getList"/>

    <rule-form ref="ruleForm" :clue-id="selectData.id" :sub="{boole: false,title: '提交'}" type-str="create" form-type="2" @succsess="getList"/>

</template>

<script>
    import { useRouter } from 'vue-router'
    import {crmStore} from "../../../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, ref , onMounted} from 'vue'
    export default defineComponent({
        name: "clueView",
        components:{
            addClue:defineAsyncComponent(
                ()=>import('../../modules/addClue.vue')
            ),
            addFollowDialog:defineAsyncComponent(
                ()=>import('../../../modules/addFollowDialog.vue')
            ),
            fromDialog:defineAsyncComponent(
                ()=>import('../../../../customer/modules/fromDialog.vue')
            ),
            ruleForm:defineAsyncComponent(
                ()=>import('../../../../customer/terminal/modules/ruleForm.vue')
            ),
            newForm:defineAsyncComponent(
                ()=>import('../../../../customer/shangPin/modules/newForm.vue')
            )
        },
        setup(){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const statusOption = crmStore.getters['dictionary/getDictionary']['clue_status']
            const headOptions = crmStore.getters['company/getHeadOptions']
            const userInfo = crmStore.getters['user/userInfo']
            const router = useRouter()
            var data = reactive({
                visible:false,
                tableData:[],
                formData:{
                    page:1,
                    pageSize:20,
                    clueStatus:'',
                    keyWord:'',
                    taskNo:'',
                    headId:'',
                },
                total:0,
                selectData:{},
                addClue:null,
                addFollow:null,
                fromDialog:null,
                newFormRef:null,
                ruleForm:null,
            })

            const reset = () => {
                data.formData = {
                    page:1,
                    pageSize:20,
                    clueStatus:'',
                    keyWord:'',
                    taskNo:'',
                    headId:'',
                }
                getList()
            }

            const listSearch = () => {
                data.formData.page = 1
                getList()
            }

            const getList = () => {
                let a = {...data.formData}
                a.headId = Number(a.headId)

                api.task.TASK_CLUE_LIST(a).then(res=>{
                    if (!res.code){
                        data.tableData = res.data.list
                        data.total = res.data.total
                    }else {
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const onDelete = (row) => {
                currentInstance.proxy
                    .alertBox({
                        message: '你确定删除此跟进线索？删除后不可恢复',
                        title: '删除',
                    })
                    .then(() => {
                        api.task.TASK_CLUE_DELETE(row.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'删除成功'})
                                getList()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onFollow = (row) => {
                data.selectData = row
                data.addFollow.open()
            }

            const handleCommand = (com,row) => {
                console.log(com,row)
                data.selectData = row
                if (com == 1){
                    data.fromDialog.open(null,null,row)
                }else if (com == 2){
                    data.newFormRef.open("新建商销客户", null,row);
                }else if (com == 3){
                    data.ruleForm.open(null, 1,row);
                }

            }

            const onTransform = (row) => {

            }

            const create = () => {
                data.addClue.open()
            }

            const rowClick = (row,column) => {
                if (column.label === '操作') return
                router.push({name:'clueDetail',query:{id:row.id}})
            }

            onMounted(()=>{
                getList()
            })

            return{
                ...toRefs(data),
                statusOption,
                headOptions,
                userInfo,

                getList,
                rowClick,
                onDelete,
                onFollow,
                onTransform,
                reset,
                listSearch,
                create,
                handleCommand,
            }
        }
    })
</script>

<style scoped>

</style>
